<template>
  <div class="banner">
    <swiper class="slide">
      <swiper-item v-for="(swiper,index) in iconItems" :key="index">
        <div class="img-list">
          <div class="img-item" v-for="(item,index) in swiper" :key="index">
            <img :src="item.icon_url" alt=""/>
            <span>{{item.title}}</span>
          </div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperItem } from "components/common/swiper";
import { mapState } from "vuex";

export default {
  name: "Banner",
  components: {
    Swiper,
    SwiperItem,
  },
  computed: {
    ...mapState(["categories"]),
    iconItems() {
      let count = Math.floor(this.categories.length / 8);
      let result = [[], []];

      this.categories.forEach((item, index) => {
        if (index < 8) result[0].push(item);
        else if (8 <= index && index < 16) result[1].push(item);
      });
      console.log(result);
      return result
    },
  },
};
</script>

<style lang="less">
.indi-item {
  background-color: #ccc !important;
}
.active {
  background-color: #ff8097 !important;
}
.indicator {
  bottom: 0px !important;
}

.banner {
  // margin-top: 6px;
  .slide {
    padding-bottom: 4px;
  }
  .img-list {
    display: flex;

    flex-wrap: wrap;
    justify-content: center;
    align-content: center;

    .img-item {
      flex: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      padding-bottom: 6px;
      img {
        width: 58px;
        height: 58px;
      }
      span {
        margin: 4px 0;
      }
    }
  }
}
</style>